var util = require("../../../libs/util.js");
import * as echarts from '../components/echarts';
var app = getApp();
var lineChart = '',lineCanvas = '',chartData = [];
var that = this;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    Custom: app.globalData.Custom,
    TabCur: -1,
    currentVehicle: '',
    VerticalNavTop: 0,
    dataList: [{id:0,name:'暂无车辆'}],
    inputShowed: false,
    searchVal: "",
    ecline: {
      onInit: function (canvas, width, height) {
        lineChart = echarts.init(canvas, null, {
          width: width,
          height: 300
        });
        canvas.setChart(lineChart);
        lineCanvas = lineChart;
        lineChart.setOption(initChartLine());

        return lineChart;
      }
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (e) {
    var that = this;
    wx.getSystemInfo({
      success: res => {
        let custom = wx.getMenuButtonBoundingClientRect();
        that.setData({
          CustomBar: custom.bottom + custom.top - res.statusBarHeight,
          client_width: res.windowWidth,
          client_height: res.windowHeight
        })
      }
    })
    
    that.loadData();
  },
  tabSelect(e) {
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      currentVehicle: e.currentTarget.dataset.vehicle,
      VerticalNavTop: (e.currentTarget.dataset.id - 1) * 50
    })
    this.loadData();
  },
  loadData: function () {
    var that = this;
    wx.showLoading({
      title: '加载中',
    })
    util.getData("/atapi/vehicle/vehicle/oil_report", {
      'CO_ID': app.globalData.CO_ID,
      'vehicle':that.data.currentVehicle,
      'searchVal': that.data.searchVal
    }, function (res, error) {
      console.log(res); console.log(error)
      var data = res.data.data[0], dataList = [];
      if (data.length > 0) {
        for (var i = 0; i < data.length;i++){
          dataList.push({
            id: data[i].ID,
            name: data[i].plate
          })
        }
        that.setData({
          dataList: dataList
        });
      } else {
        that.setData({
          dataList: [{ id: 0, name: '暂无车辆' }]
        });
      }
      chartData = res.data.data[1];
      that.setData({
        count:res.data.data[2][0].count||0,
        mile:Number(res.data.data[2][0].mile).toFixed(0)||0,
        pay_price:Number(res.data.data[2][0].pay_price).toFixed(0)||0,
        mile_oil:Number(res.data.data[2][0].mile_oil).toFixed(1)||0
      })
      try{
        lineChart.setOption(initChartLine());
      }catch(e){}
      
      wx.hideLoading();
    });
  },
  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    this.setData({
      searchVal: "",
      inputShowed: false
    });
    this.loadData();
  },
  clearInput: function () {
    this.setData({
      searchVal: ""
    });
    this.loadData();
  },
  inputTyping: function (e) {
    this.setData({
      searchVal: e.detail.value
    });
    this.loadData();
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
function initChartLine() {
  var  xData = [],yData = [];
  for(var i=0;i<chartData.length;i++){
    xData.push(chartData[i].months);
    yData.push(chartData[i].mile_oil);
  }
  var option = {
    backgroundColor: "#ffffff",
    title: {
      show: false
    },
    legend: {
      show: false
    },
    grid: {
      left: '25px',
      right: '15px',
      bottom: '15px',
      top: '15px',
      containLabel: true
    },
    color: ["#37A2DA", "#67E0E3", "#9FE6B8"],
    tooltip: {
      show: true,
      trigger: 'axis',
      position: ['50%', '50%']
    },
    xAxis: {
      type: 'value',
      x: 'center',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      show: true
    },
    yAxis: {
      type: 'category',
      show: true,
      boundaryGap: false,
      data: xData,
    },
    series: [{
      name: '百公里油耗',
      type: 'line',
      smooth: true,
      data: yData
    }]
  };
  return option;
}